<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>新闻中国</title>
    <link href="css/main.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header">
    <div id="top_login">
        <form th:action="@{/login}" method="post">
            <label> 登录名 </label>
            <input type="text" id="uname" name="uname" class="login_input"/>
            <label> 密&#160;&#160;码 </label>
            <input type="password" id="upwd" name="upwd" class="login_input"/>
            <input type="submit" class="login_sub" value="登录"/>
        </form>
        <label id="error"> </label>
        <img th:src="@{/images/frend_logo.gif}" alt="Google" id="friend_logo"/>
    </div>
    <div id="nav">
        <div id="logo"><img th:src="@{/images/logo.jpg}" alt="新闻中国"/></div>
        <div id="a_b01"><img th:src="@{/images/a_b01.gif}" alt=""/></div>
        <!--mainnav end-->
    </div>
</div>
<div id="container">
    <div class="sidebar">
        <h1><img src="images/title_1.gif" alt="国内新闻"/></h1>
        <div class="side_list">
            <ul>
                <li th:each="news:${newsList1}"><a th:href='@{/index/readnews/{nid}(nid=${news.nid})}'><b
                        th:text="${news.ntitle}"></b></a></li>

            </ul>
        </div>
        <h1><img src="images/title_2.gif" alt="国际新闻"/></h1>
        <div class="side_list">
            <ul>
                <li th:each="news:${newsList2}"><a th:href='@{/index/readnews/{nid}(nid=${news.nid})}'><b
                        th:text="${news.ntitle}"> </b></a></li>
            </ul>
        </div>
        <h1><img src="images/title_3.gif" alt="娱乐新闻"/></h1>
        <div class="side_list">
            <ul>
                <li th:each="news:${newsList3}"><a th:href='@{/index/readnews/{nid}(nid=${news.nid})}'><b
                        th:text="${news.ntitle}"> </b></a></li>
            </ul>
        </div>
    </div>
    <div class="main">
        <div class="class_type"><img src="images/class_type.gif" alt="新闻中心"/></div>
        <div class="content">
            <ul class="class_date">
                <li id='class_month'>
                    <a href="javascript:" th:id="${topic.tid}" th:each="topic:${topics}"><b th:text="${topic.tname}"></b></a>
                </li>
            </ul>
            <ol class="classlist">
            </ol>
        </div>
        <div class="picnews">
            <ul>
                <li><a href="#"><img src="images/Picture1.jpg" width="249" alt=""/> </a><a href="#">幻想中穿越时空</a></li>
                <li><a href="#"><img src="images/Picture2.jpg" width="249" alt=""/> </a><a href="#">国庆多变的发型</a></li>
                <li><a href="#"><img src="images/Picture3.jpg" width="249" alt=""/> </a><a href="#">新技术照亮都市</a></li>
                <li><a href="#"><img src="images/Picture4.jpg" width="249" alt=""/> </a><a href="#">群星闪耀红地毯</a></li>
            </ul>
        </div>
    </div>
</div>
<div id="footer">
    <!-- <iframe src="index-elements/index_bottom.html" scrolling="no" frameborder="0" width="947px" height="190px"></iframe>-->
    <div id="friend">
        <h1 class="friend_t"><img src="images/friend_ico.gif" alt="合作伙伴"/></h1>
        <div class="friend_list">
            <ul>
                <li><a href="#">百度</a></li>
                <li><a href="#">谷歌</a></li>
                <li><a href="#">新浪</a></li>
                <li><a href="#">网易</a></li>
                <li><a href="#">搜狐</a></li>
                <li><a href="#">人人</a></li>
                <li><a href="#">中国政府网</a></li>
            </ul>
        </div>
    </div>
    <div>
        <p class=""> 24小时客户服务热线：010-68988888 &#160;&#160;&#160;&#160; <a href="#">常见问题解答</a> &#160;&#160;&#160;&#160;
            新闻热线：010-627488888 <br/>
            文明办网文明上网举报电话：010-627488888 &#160;&#160;&#160;&#160; 举报邮箱： <a href="#">jubao@jb-hisoft.com.cn</a></p>
        <p class="copyright"> Copyright &copy; 1999-2009 News China gov, All Right Reserver <br/>
            新闻中国 版权所有 </p>
    </div>

</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    var currPageNo = 1;
    function getPage(pageNo){
        $("#pagebar").remove();
        $(".classlist").empty();

        $.ajax({
            //局部刷新
            url:'/index/pagenews?pageNo='+pageNo,
            type:'get',
            dataType:'json',
            success:function (page) {
                var data = page.newsList;
                $(data).each(function (i) {
                    var $li = $("<li><b>"+(i+1)+".</b><a href='/index/readnews/"+this.nid+"'>"+this.ntitle+"</a><span>"+this.ncreateDate+"</span></li>");
                    $(".classlist").append($li);
                    if ((i+1)%5==0){
                        $(".classlist").append("<li class='space'></li>");
                    }
                });
                var $p = $("<p align=\"right\" id='pagebar'> 当前页数:["+page.pageNo+"/"+page.totalPageCount+"]&nbsp; <a href=\"javascript:;\" onclick='getPage(1)'>首页</a><a href=\"javascript:;\" onclick='getPage("+(page.pageNo-1)+")'>上一页</a><a href=\"javascript:;\" onclick='getPage("+(page.pageNo+1)+")'>下一页</a> <a href=\"javascript:;\" onclick='getPage("+page.totalPageCount+")'>末页</a> </p>")
                $(".content").append($p);
            }
        })

    }

    $(function () {

        getPage(1);

        $("#class_month a").click(function () {
            /*  location.href="tid="+$(this).attr("id");*/
            $(".classlist").empty();
            $.ajax({
                //局部刷新
                url:'/index/topicnews/'+$(this).attr("id"),
                type:'get',
                dataType:'json',
                success:function (data) {
                    $(data).each(function (i) {
                        var $li = $("<li><b>"+(i+1)+".</b><a href='/index/readnews/"+this.nid+"'>"+this.ntitle+"</a><span>"+this.ncreateDate+"</span></li>");
                        $(".classlist").append($li);
                        if ((i+1)%5==0){
                            $(".classlist").append("<li class='space'></li>>");
                        }
                    });

                }
            })

        })

    })
</script>
</body>
</html>
	